<template>
    <el-aside width="200px" class="sidebar">

      <el-menu :default-active="activeMenu" class="menu" @select="handleSelect" background-color="#00274d">
        <el-menu-item index="/Dashboard">首页</el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <span style="color: #fff;">商品管理</span>
          </template>
          <el-menu-item index="/products/management">商品管理</el-menu-item>
          <el-menu-item index="/products/StockManagement">库存管理</el-menu-item>
          <el-menu-item index="/products/ProductCategory">商品分类</el-menu-item>
          <el-menu-item index="/products/ProductRelease">商品发布</el-menu-item>
          <el-menu-item index="/products/ProductFeedback">商品评价</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/points-management">积分管理</el-menu-item>
        <el-menu-item index="/orders">订单管理</el-menu-item>
        <el-menu-item index="/users">用户管理</el-menu-item>
        <el-menu-item index="/TransactionManagement">交易管理</el-menu-item>
        <el-menu-item index="/MessageManagement">消息管理</el-menu-item>
        <el-menu-item index="/CommunityManagement">社区管理</el-menu-item>
        <el-menu-item index="/PromotionManagement">推广管理</el-menu-item>
        <el-menu-item index="/DataAnalysis">数据分析</el-menu-item>
        <el-menu-item index="/reports">报告</el-menu-item>
        <el-menu-item index="/settings">设置</el-menu-item>
      </el-menu>
    </el-aside>
  </template>
  
  <script setup>
  import { ref, watchEffect } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElAside, ElMenu, ElMenuItem, ElSubMenu } from 'element-plus';
  
  const router = useRouter();
  const activeMenu = ref(router.currentRoute.value.path);
  const avatarUrl = ref(null); // To store the uploaded avatar URL
  
  const handleSelect = (index) => {
    router.push(index);
  };
  
  // Handle file input change
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        avatarUrl.value = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };
  
  // Update active menu item when route changes
  watchEffect(() => {
    activeMenu.value = router.currentRoute.value.path;
  });
  </script>
  
  <style scoped>
  .sidebar {
    background-color: #00274d; /* Deep blue background */
    color: #ffffff; /* White text */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure it covers the full viewport height */
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #003366; /* Slightly lighter blue for the border */
    background-color: #001f3f; /* Even darker blue for header */
  }
  
  .file-input {
    display: none; /* Hide file input */
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    background-color: #ffffff; /* Background color if image is not loaded */
  }
  
  .avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00274d; /* Deep blue text color */
    margin-right: 10px;
  }
  
  .name {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* White text color */
  }
  
  .menu {
    flex: 1; /* Allow menu to take available space */
    border-right: 1px solid #003366; /* Match header border color */
    overflow: auto; /* Add scroll if menu overflows */
  }
  
  .el-menu {
    background-color: #00274d !important; /* Deep blue background for menu */
  }
  
  .el-sub-menu {
    background-color: #00274d !important; /* Ensure background color for sub-menu matches */
  }
  
  .el-menu-item {
    color: #ffffff !important; /* White text color for menu items */
  }
  
  .el-menu-item.is-active {
    background-color: #003366 !important; /* Slightly lighter blue for active item */
  }
  
  .el-menu-item:hover {
    background-color: #004080 !important; /* Hover background color */
  }
  
  .el-menu-item.is-active .el-menu-item__content {
    color: #ffffff !important; /* Ensure active menu item text color is white */
  }
  </style>
  